$(function (){
    //条形图
    const barChart = document.getElementById('barChart');
    const labels = ['待发货', '发货中', '已发货', '已退款', '待评价', '已评价'];
    const data1 = {
        labels: labels,
        datasets: [{
            label: '条形图',
            data: [65, 48, 55, 32, 17, 36, 40],
            backgroundColor: [
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 205, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(201, 203, 207, 0.2)'
            ],
            borderColor: [
                'rgb(255, 99, 132)',
                'rgb(255, 159, 64)',
                'rgb(255, 205, 86)',
                'rgb(75, 192, 192)',
                'rgb(54, 162, 235)',
                'rgb(153, 102, 255)',
                'rgb(201, 203, 207)'
            ],
            borderWidth: 1
        }]
    };
    new Chart(barChart, {
    type: 'bar',
    data: data1,
    options: {
    scales: {
    y: {
    beginAtZero: true
                }
            }
        }
    });

    //点线图
    let lineChart = document.getElementById('lineChart');
    const data = {
        labels: labels,
        datasets: [{
            label: '点线图',
            data: [65, 48, 55, 32, 17, 36, 40],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    };
    new Chart(lineChart, {
        type: 'line',
        data: data,
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    //环形图
    let doughnutChart = document.getElementById('doughnutChart');
    const data3 = {
        labels: [
            '生活用品',
            '电子教育',
            '游戏设备'
        ],
        datasets: [{
            label: '环形图',
            data: [150, 200, 100],
            backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)'
            ],
            hoverOffset: 4
        }]
    };
    new Chart(doughnutChart, {
        type: 'doughnut',
        data: data3,
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    //极面积图
    let polarAreaChart = document.getElementById('polarAreaChart');
    const data4 = {
        labels: [
            '生活用品',
            '手机配件',
            '影视娱乐',
            '智能设备',
            '电子教育',
            '游戏设备',
            '网络产品',
            '外设产品'
        ],
        datasets: [{
            label: '极面积图',
            data: [ 30, 24, 20, 23, 30, 29, 35, 28],
            backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(75, 192, 192)',
                'rgb(255, 205, 86)',
                'rgb(21, 203, 207)',
                'rgb(54, 16, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 35)'
            ]
        }]
    };
    new Chart(polarAreaChart, {
        type: 'polarArea',
        data: data4,
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    //数字增长动画
    function animateValue(id, start, end, duration) {
        var range = end - start;
        var current = start;
        var increment = end > start? 1 : -1;
        var stepTime = Math.abs(Math.floor(duration / range));
        var obj = document.getElementById(id);

        var timer = setInterval(function() {
            current += increment;
            obj.textContent = current;
            if (current == end) {
                clearInterval(timer);
            }
        }, stepTime);
    }

    animateValue("number1", 0, 381, 10); // 从0增加到100，过程持续2000毫秒
    animateValue("number2", 0, 114, 10); // 从0增加到100，过程持续2000毫秒
    animateValue("number3", 0, 52, 10); // 从0增加到100，过程持续2000毫秒
})